<template>
  <div class="clock-result">
    <button class="clock-button" @click="showClockResult">
      测试打卡弹窗
    </button>
  </div>
</template>

<script>
export default {
  name: 'ClockResultDialog',
  methods: {
    async showClockResult() {
      console.log('显示打卡结果弹窗');
      
      // 使用全局Vue实例的$alert方法（替代原生alert）
      alert('您今天已经打过卡了，请24小时后再来。');
      
      // 或者直接使用我们的全局快捷方法
      await this.$showMessage('您今天已经打卡成功！', 'success');
      console.log('弹窗已关闭');
    }
  }
};
</script>

<style scoped>
.clock-result {
  margin: 20px 0;
}

.clock-button {
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style> 